<template>
    <div class="example-editor" ref="editorRef"></div>
</template>

<script lang="ts" setup>
import mxgraph, { mxCellmxGraph, mxGraphHandler } from "mxgraph";
import { onMounted, ref, Ref } from "vue";
const mxgraphData = [
    {
        nodesList: [
            [0, "宝鸡市"],
            [1, "渭南市"],
            [2, "西安市"],
            [3, "汉中市"],
            [4, "安康市"],
        ],
        edgesList: [
            [0, "200Km", 1],
            [1, "300km", 2],
            [1, "75Km", 3],
            [3, "100Km", 4],
            [4, "90Km", 5],
        ],
    },
];
import {
    myMxClient,
    myMxCodec,
    myMxConstants,
    myMxEdgeStyle,
    myMxGraph,
    myMxPoint,
    myMxRubberband,
    myMxUtils,
    myMxHierarchicalLayout,
    myMxCompactTreeLayout,
} from "@/components/myMxGraph/myMxGraphLoader";
// from "../myMxGraph/myMxGraphLoader";
const editorRef: Ref<HTMLDivElement | undefined> = ref();
const currentGraph: Ref<mxGraph | undefined> = ref();
async function initGraph() {
    const container = editorRef.value;
    if (!myMxClient.isBrowserSupported()) {
        myMxUtils.error("浏览器不支持", 200, false);
    }
    const graph = new myMxGraph(container);
    var parent = graph.getDefaultParent();
   
    // 定义节点样式
    var nodeStyle = {};
    nodeStyle[myMxConstants.STYLE_FILLCOLOR] = "#3CAEA3";
    nodeStyle[myMxConstants.STYLE_FONTSIZE] = 12;
    nodeStyle[myMxConstants.STYLE_STROKECOLOR] = "white";
    nodeStyle[myMxConstants.STYLE_FONTCOLOR] = "white";
    nodeStyle[myMxConstants.STYLE_ROUNDED] = 1;
    // 将定义好的样式object push 到 stylesheet
    graph.getStylesheet().putCellStyle("nodeStyle", nodeStyle);
    graph.getModel().beginUpdate();
    const layout = new myMxHierarchicalLayout(graph) // 竖向结构
    //   const layout = new myMxCompactTreeLayout(graph); //横向树形结构
    try {
      await   createNodes(graph, parent);
      console.log(graph.getModel());
    //   graph.insertVertex()
      
     
        layout.execute(parent);
        console.log("222");
        
    } finally {
        
        // Updates the display
        graph.getModel().endUpdate();
    }
}
async function createNodes(graph, parent) {
    const nodeList = mxgraphData[0].nodesList;
  await  nodeList.forEach( async(e, index) => {
        const [id, text] = e;
        console.log(id, text);
        
       await graph.insertVertex(
            parent,
            'v'+id,
            text,
            100 * (index + 1),
            0,
            150,
            40,
            "nodeStyle"
        );
    });
    // 生成连线
    const edgesList = mxgraphData[0].edgesList;
  await  edgesList.forEach((e,index)=>{
        const [start,label,end]=e
        const v1 = graph.getModel().getCell('v'+start)
        const v2 = graph.getModel().getCell('v'+end)
        console.log(start,label,label);
        
        // graph.
        graph.insertEdge(parent,null,label,v1,v2,"")

    })
    console.log("111");
    

}

onMounted(() => {
    console.log("app is onMounted");
    initGraph();
});
</script>

<style>
.example-editor {
    background: url("@/assets/editor/images/grid.gif");
    height: 100vh;
    width: 100%;
}
</style>
